<template>
	<view>
		<uni-nav-bar :fixed="true" @clickLeft="handleBack" left-icon="back" statusBar="true" title="我的订单"></uni-nav-bar>
		<!-- 没有东西 -->
		<view class=" canui-kong" v-if="orderList.length===0&&hasLogin">
		    <view class="bg-yellow padding  shadow-blur canui-kong-icon flex justify-center align-center">
		        <text class="cuIcon-cart text-white"></text>
		    </view>
				 
		    <view class="text-lg  flex justify-center align-center">
		        <text class="text-grey">此处空空如也~</text>
		    </view>
		</view>
		
		<!-- 没有登录 -->
		<view class="canui-kong" v-if="!hasLogin">
		    <view class="bg-yellow padding  shadow-blur canui-kong-icon flex justify-center align-center">
		        <text class="cuIcon-weixin text-white"></text>
		    </view>
				 
		    <view class="text-sm  flex justify-center align-center">
		        <text class="text-grey text-lg">请先登录~</text>
		    </view>
		</view>
				
		<view class="" v-for="(item,index) in orderList" :key="item">
			<view class="cu-list menu margin-top-sm" style="border-left: rgb(231,173,33) solid 10rpx;">
			<view class="cu-item flex justify-between" style="padding-left: 10rpx;">
				<view class="">
					<text>订单号：</text>
					<text>{{item.orderId}}</text>
				</view>
				<view :class="item.orderState?'text-green':'text-red'">
					<text>{{item.orderState?"已支付":"待支付"}}</text>
					<text class="text-price" style="padding-left: 10rpx;">{{item.orderPrice}}元</text>
					
				</view>
			</view>
			<view class="cu-item padding-top-sm padding-bottom" style="padding-left: 10rpx; padding-bottom: 10rpx;">
				<view class="flex align-end">
					<!-- <view class="bg-img" style="margin-right: 10rpx;">
						<image class="solids" style="width: 100rpx;height: 150rpx;" src="https://s1.ax1x.com/2020/09/11/wtij4U.png"></image>
					</view>
					<view class="bg-img" style="margin-right: 10rpx;">
						<image class="solids" style="width: 90rpx;height: 150rpx;" src="https://s1.ax1x.com/2020/09/11/wtij4U.png"></image>
					</view>
					<view class="bg-img" style="margin-right: 10rpx;">
						<image class="solids" style="width: 90rpx;height: 150rpx;" src="https://s1.ax1x.com/2020/09/11/wtij4U.png"></image>
					</view> -->
					<view class="bg-img" style="margin-right: 10rpx;" v-for="(v,i) in item.orderBooks" :key="i">
						<!-- <text>{{v.img}}</text> -->
						<image class="solids" style="width: 100rpx;height: 150rpx;" :src="v.book.img"></image>
					</view>
					<view v-if="item.books.length > 3" class="cuIcon-more"></view>
				</view>
				<view class="flex flex-direction align-end">
					<view class="">
						<text>共
						<text>{{item.orderBooks.length}}</text>
						件商品</text>
					</view>	
					<view class="text-gray">
						<text>{{item.orderTime}}</text>
					</view>
					<view class="flex margin-top-sm" v-if="item.orderState === false">
						<button @click="hangdlePay(index)" class="cu-btn sm bg-yellow text-white" style="margin-right: 5rpx;">去支付</button>
						<!-- <button @click="changeToRent(index)" class="cu-btn sm bg-yellow text-white" style="margin-right: 5rpx;">改为租借</button> -->
						<button @click="cancelOrder(index)" class="cu-btn sm bg-yellow text-white" style="margin-right: 5rpx;">取消订单</button>
					</view>
					
					<view class="flex margin-top-sm" v-if="item.orderState === true">
						<button @click="handleExchange(index)" class="cu-btn sm bg-yellow text-white" style="margin-right: 5rpx;">申请退/换货</button>
					</view>
				</view>
				
				
			</view>
		</view>
		</view>
		
		
		<view class="flex justify-end padding-sm">
			<button type="default" class="cu-btn icon" @click="showTip">
				<text class="cuIcon-infofill text-yellow" style="transform: scale(2.3);"></text>
			</button>
		</view>
		
		<view class="" style="height:150rpx;"></view>
		<!-- <myTabBar @setCurPage="setCurPage" :tabBar="tabBar" :curPage="curPage"></myTabBar> -->
		
		<view class="cu-modal" :class="modalName=='DialogModal'?'show':''">
		   <view class="cu-dialog">
		    <view class="cu-bar bg-white justify-end">
		     <view class="content text-yellow">提示</view>
		     
		    </view>
		    <view class="padding-xl flex flex-direction ">
		     <view class="flex align-center margin-bottom">
		      <image src="../../static/images/pay/订单提示.png" mode="widthFix" style="width: 30px; height: 30px;"></image>
		      <text class="text-yellow text-lg margin-left-sm">退换货注意事项</text>
		      
		     </view>
		     <text>退换货需要到店操作，小程序尚未开放此功能</text>
		     <text>敬请期待</text>
		    </view>
		    <view class="cu-bar bg-white">
		     <view class="action margin-0 text-lg flex-sub text-yellow " @tap="modalName = null">确定</view>
		    </view>
		   </view>
		  </view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex';
	import {queryOrdersByUser,cancelOrder} from '../../request/handleReq.js'
	var _self;
	export default {
		computed:mapState(['hasLogin']),
		data() {
			return {
				curPage:'my',
				orderList:[],
				modalName:null
				// orderList:[
				// 	{
				// 		orderId:'04460002020082400001',
				// 		orderState:true,
				// 		orderPrice:'55.00',
				// 		orderNums:4,
				// 		orderTime:'2020-4-28'
				// 	},
				// 	{
				// 		orderId:'04460002020082400002',
				// 		orderState:false,
				// 		orderPrice:'55.00',
				// 		orderNums:4,
				// 		orderTime:'2020-4-28'
				// 	},
				// 	{
				// 		orderId:'04460002020082400001',
				// 		orderState:true,
				// 		orderPrice:'1.00',
				// 		orderNums:4,
				// 		orderTime:'2020-4-28'
				// 	},
				// 	{
				// 		orderId:'04460002020082400001',
				// 		orderState:false,
				// 		orderPrice:'555.00',
				// 		orderNums:4,
				// 		orderTime:'2020-4-28'
				// 	},
				// 	{
				// 		orderId:'04460002020082400001',
				// 		orderState:true,
				// 		orderPrice:'5.00',
				// 		orderNums:100,
				// 		orderTime:'2020-4-28'
				// 	}
				// ]
			}
		},
		
		mounted() {
			// let that = this;
			if(this.hasLogin){
				queryOrdersByUser().then(res => {
					// console.log(res);
					// res.forEach(item => {
					// 	if(item.order_type == 0){
					// 		// console.log(new Date(item.create_time));
					// 		this.orderList.push({
					// 			orderId:item.order_id,
					// 			orderState:item.order_status === 'PAYED'?true:false,
					// 			orderPrice:item.money,
					// 			orderTime:new Date(item.create_time).format('yyyy-MM-dd hh:mm:ss'),
					// 			orderBooks:item.cart.items.map(item => {
					// 				return {
					// 					book:item.book,
					// 					num:item.num
					// 				}
					// 			})
					// 		})
					// 	}
					// })
					this.orderList = res.filter(item=>item.order_type == 0).map(x=>{
						return {
									orderId:x.order_id,
									orderState:x.order_status == 1 ?true:false,
									orderPrice:x.money,
									orderTime:new Date(x.create_time).format('yyyy-MM-dd hh:mm:ss'),
									orderBooks:x.books
						}
					})
					console.log(this.orderList);
				}).catch(reason => {
					uni.showModal({
						title: '错误',
						content: reason,
						mask: true,
						showCancel: false
					});
				})
			}
			
		},
		methods: {
			// handlePreview(){
			// 	uni.previewImage({
			// 		urls: new Array("https://ae01.alicdn.com/kf/H128dca58f1de40d4bd088605f991c8da3.jpg")					
			// 	})
			// },
			hangdlePay(index){
				console.log("去支付");
			},
			cancelOrder(index){
				// console.log(index);
				var _self = this;
				uni.showModal({
					cancelColor: 'red',
					confirmColor: "#4CD964",
					title: "确认",
					content: '是否确定取消该订单？',
					success(res) {
						if(res.confirm){
							cancelOrder(_self.orderList[index].orderId).then(res => {
								if(res.data.code == 200){
									_self.orderList.splice(index,1);
								}else{
									uni.showModal({
										title: '错误',
										content: res.data.msg,
										mask: true,
										showCancel: false
									});
								}
							}).catch(reason => {
								uni.showModal({
									title: '错误',
									content: reason,
									mask: true,
									showCancel: false
								});
							})
						}
					
					}
				})
			},
			handleExchange(index){			
				 this.$refs['showImg'].open();
				
			},
			// changeToRent(index){
			// 	var _self = this;
			// 	uni.showModal({
			// 		cancelColor: 'red',
			// 		confirmColor: "#4CD964",
			// 		title: "确认",
			// 		content: '是否改为租借？',
			// 		success(res) {
			// 			_self.orderList.splice(index,1);
			// 		}
			// 	})	
			// },
			setCurPage(e) {
				uni.reLaunch({
					url:'../'+e+'/'+e
				})
				// this.curPage = e;
				
			},
			showTip(){
				// uni.showModal({
				// 	title: '提示',
				// 	content: '书本租借订单和租借状态请移步至：我的-我的租借处查看',
				// 	showCancel: false
				// });
				this.modalName = 'DialogModal'
			},
			handleBack() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style>

</style>
